<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height:500px;
            width:500px;
            background-color: red;
        }
        p{
            height:300px;
            width:300px;
            background-color: blue; 
        }
        span{
            display: inline-block;
            height:100px;
            width:100px;
            background-color: green; 
        }
    </style>
</head>
<body>
    <div id="divbox">
        <p id="pbox">
            <span id="spanbox"></span>
        </p>
    </div>
    <script>
        // event事件周期
        // 1.捕获阶段（IE没有捕获阶段）---方向：由外向里
        // 2.目标触发
        // 3.冒泡阶段 ---方向：由里向外

        // divbox.onclick=function(){
        //     alert("divbox");
        // }
        // pbox.onclick=function(){
        //     alert("pbox");
        // }
        // spanbox.onclick=function(){
        //     alert("spanbox");
        // }

        divbox.addEventListener("click",function(){
            alert("divbox");
        },true)
        pbox.addEventListener("click",function(){
            alert("pbox");
        },true)
        spanbox.addEventListener("click",function(){
            alert("spanbox");
        },true)
    </script>
</body>
</html>